<template>
	<view class="container">
		<st-navigation title="投诉建议" backgroundColor="#fff"></st-navigation> 
		<view class="contentWrap">
			<view class="empty">

			</view>
			<picker @change="bindTypePickerChange" :value="formData.type" :range="typeOptions">
				<uni-list-item showArrow :rightText="formData.type">
					<template v-slot:header>
						<view class="slot-title">问题类型</view>
					</template>
				</uni-list-item>
			</picker>
			<view class="item">
				<view class="sug-title">
					<view class="">
						{{ typeText }}问题
					</view>
					<view class="red">
						*
					</view>
				</view>
				<view class="form-textarea">
					<textarea v-model="formData.content" placeholder="请填写您的问题..." :maxlength="500" />
				</view>
			</view>
		</view>

		<view class="actions">
			<button type="primary" class="btn" @click="addComplaint">确认提交</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				content: '',
				type: '',
			},
			allConfig: {},
			typeOptions: [],
		}
	},
	computed: {
		selectType() {
			let type = this.allConfig.complain;
			if (type && type.length && this.formData.type) {
				return type.find(x => x.name === this.formData.type)['id'];
			}
			return '';
		},
		typeText() {
			return this.formData.type ? this.formData.type : '';
		}
	},
	onLoad(option) {
		this.queryConfig();
	},
	methods: {
		queryConfig() {
			this.$api.get({
				url: '/wanlshop/config/all',
				success: res => {
					let { complain } = res;
					this.typeOptions = complain.map(x => x.name);
					console.log(this.typeOptions);

					this.allConfig = res;
				},
				error: err => {
					console.log(err);
				}
			})
		},
		addComplaint() {
			if (!this.formData.type) {
				uni.showToast({
					title: '请选择问题类型',
					icon: 'none'
				})
				return;
			}
			if (!this.formData.content) {
				uni.showToast({
					title: '请填写问题建议',
					icon: 'none'
				})
				return;
			}

			let params = JSON.parse(JSON.stringify(this.formData));
			params.type = this.selectType;

			this.$api.post({
				url: '/wanlshop/complaint/add',
				data: params,
				success: res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				},
				error: err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				}
			})
		},
		bindTypePickerChange(e) {
			console.log(e);
			this.formData.type = this.typeOptions[e.detail.value];
		}
	}
}
</script>

<style scoped lang="less">
body,
uni-page-body {
	height: 100%;
}

.container {
	height: 100%;
	background-color: #fff;

	.empty {
		height: 16rpx;
		background: #F6F5FA;
	}

	.contentWrap {
		background-color: #fff;
	}

	.uni-list-item {
		font-weight: 600;
		font-size: 28rpx;
		line-height: 40rpx;
		padding-top: 32rpx;
		padding-bottom: 8rpx;

		.slot-title {
			position: relative;

			&::after {
				content: '*';
				position: absolute;
				top: 0;
				right: -16rpx;
				color: red;
			}
		}
	}

	.item {
		margin: 0 32rpx;
		border-top: 2rpx solid #E6E6E6;
		padding: 40rpx 0;

		.sug-title {
			display: flex;
			align-items: center;
			font-weight: 600;
			font-size: 28rpx;
			line-height: 40rpx;

			.red {
				color: red;
			}
		}

		.form-textarea {
			height: 200rpx;
			background: #F7F7F7;
			border-radius: 8px;
			padding: 32rpx;
			margin-top: 32rpx;
			font-size: 30rpx;
			line-height: 42rpx;
		}
	}

}

.actions {
	position: fixed;
	width: 100%;
	bottom: 40rpx;
	left: 0;
	padding: 0 32rpx;

	.btn {
		height: 96rpx;
		background: #FE8101;
		border-radius: 200rpx;
	}
}
</style>
